<template>
  <div v-if="tableData.length > 0" class="container">
    <div class="column-tit001">
      <p>公告</p>
      <div class="more001">
        <span>查看更多</span>
      </div>
    </div>
    <div class="notice-list">
      <div class="notice-item" v-for="item in tableData" :key="item.id" @click="showAll(item)">
        <div class="title">{{item.title}}</div>
        <div class="time">{{item.createdAt}}</div>
      </div>
    </div>
    <el-dialog v-model="showAllVisible" title="消息通知" width="60%" class="notice-title">
      <div class="notice-title" >{{ currentNotice.title }}</div>
      <div class="bottom-info">
        <div class="from" v-if="currentNotice?.targetInfo?.departName"><span>来源：</span>{{currentNotice.targetInfo.departName}}</div>
        <div class="from" v-else-if="currentNotice?.targetInfo?.courseName"><span>来源：</span>{{currentNotice.targetInfo.courseName}}</div>
        <div v-else>系统</div>
        <div class="time">发布时间：{{ dayjs(currentNotice?.createdAt).format("YYYY-MM-DD") }}</div>
        <div class="bottom-line"></div>
      </div>
      <el-scrollbar max-height="400px">
        <div class="notice-html" v-html="currentNotice.content"></div>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="showAllVisible = false">我知道了</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { pagingAnnouncement } from '@/api/notice'
import dayjs from 'dayjs'
// import { tableList as mixTable } from "@ruifox-cms/utils";

//分页器
// const {
//   queryData,
//   tableData,
//   // tableLoading,
//   checkedNum,
//   isAllChooseBtn,
//   isPageChooseBtn,
//   // checkedList,
//   // isAllSearch,
//   // getTableData,
//   //   handleSearch,
//   handleCurrentChange,
//   handleSizeChange,
//   handlePageChoose,
//   handleAllChoose,
//   handleInvertChoose,
//   // handleCheckTable,
//   handleResetPagination,
// } = mixTable({
//   getListApi: pagingAnnouncement,
//   // batchFuncApi: deleteByIdsCourse,
// });

const queryData = ref({})
const tableData = ref([]);
const defaultForm = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 6,
  sort: "",
  order: "",
  checked: true,
  needToSort: true,
  sortArray: [],
  orderArray: [],
  type: "SYSTEM",  //前台首页只显示系统公告
  title: "",
  top: "",
  orderByStatement: "",
  statement: ""
})
Object.assign(queryData.value, defaultForm);

// const noticeList = ref([])

const getNoticeList = async () => {
  const res = await pagingAnnouncement(queryData.value)
  tableData.value = res.data.list
  console.log("tableData",tableData.value); 
}

const currentNotice = ref({});
const showAllVisible = ref(false);
const showAll = (row) => {
  showAllVisible.value = true;
  currentNotice.value = row;
  //发送已读
}

onMounted(() => {
  getNoticeList()
})
</script>

<style lang='scss' scoped>
.container{
  margin: px2rem(80) 0 0;
  .column-tit001{
    display: flex;
    justify-content: space-between;
  }
  .notice-list{
    margin-top: px2rem(40);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: px2rem(20);
    .notice-item{
      width: calc(33.3% - 0.2rem);
      padding: px2rem(20) ;
      box-sizing: border-box;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: all .3s;
      .title{
        font-size: px2rem(18);
        color: $black;
        @include textEllipsis(27, 1);
      }
      .time{
        margin-top: px2rem(10);
        font-size: px2rem(16);
        color: #666;
      }
      &:hover{
        box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
        .title{
          color: $mainColor;
        }
      }
    }
  }
}
</style>